<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #F5F5F5;
				text-align: center;
			}

			a {
				text-decoration: none;
			}

			:focus {
				outline: none;
			}

			#bigbox {
				width: 850px;
				height: 550px;
				background-color: white;
				margin: auto auto;
				position: relative;
				top: 150px;
			}

			.p1 {
				font-size: 30px;
				position: relative;
				top: 40px;
				color: #666666;
			}

			.logo {
				width: 50px;
				height: 50px;
				background-color: #FF6700;
				/* border-radius: 5%; */
				margin: auto auto;
				position: relative;
				top: 0px;
			}

			#guojia {
				width: 330px;
				height: 60px;
				/* border: 1px solid #000; */
				margin: auto auto;
				position: relative;
				top: 80px;
			}

			#guojia .p2 {
				font-size: 14px;
				float: left;
				color: #666666;
			}

			.cn {
				width: 330px;
				height: 38px;
				float: left;
				border: 1px solid #E0E0E0;
			}

			.cn p {
				float: left;
				line-height: 38px;
				margin: 0px 10px;
				font-size: 14px;
				color: #666666;
			}

			#dwon {
				width: 38px;
				height: 38px;
				border-left: 1px solid #E0E0E0;
				/* border-bottom: transparent;
				border-top: transparent;
				border-right: transparent; */
				float: right;
			}

			.icon_cirarr {
				float: right;
				background: url(https://account.xiaomi.com/static/res/0eeaaed/passport/oauth/images/icon_user.png);
				width: 16px;
				height: 16px;
				margin: 11px 12px 0 12px;
			}

			.p3 {
				display: block;
				font-size: 14px;
				margin: 8px 5px;
				position: relative;
				top: 76px;
				left: -35px;
				color: #666666;
			}

			#phone {
				width: 330px;
				height: 60px;
				/* border: 1px solid #000; */
				margin: auto auto;
				position: relative;
				top: 80px;
			}

			.phone_p {
				font-size: 14px;
				float: left;
				color: #666666;
			}

			.phone_kuang {
				width: 330px;
				height: 38px;
				float: left;
				border: 1px solid #E0E0E0;
			}

			#phone_dwon {
				width: 68px;
				height: 38px;
				border-right: 1px solid #E0E0E0;
				float: left;
			}

			#phone_dwon p {
				color: #555;
				font-size: 14px;
				float: left;
				margin: 10px 0 0 10px;
			}

			.icon_arrow {
				float: left;
				margin: 17px 0 0 10px;
				width: 0;
				height: 0;
				line-height: 0;
				font-size: 0;
				border-width: 5px;
				border-style: solid;
				border-color: #9d9d9d transparent transparent transparent;
			}

			#number {
				width: 246px;
				height: 25px;
				margin: 7px;
				border: transparent;
			}

			#submit {
				width: 330px;
				height: 45px;
				position: relative;
				top: 90px;
				background-color: #FF6700;
				color: white;
				line-height: 45px;
				font-size: 14px;
				margin: auto auto;
			}
			#submit:hover{
				opacity:0.7;
			}
			.p4 {
				display: inline-block;
				position: relative;
				top: 240px;
				color: #9D9D9D;
				font-size: 14px;
				margin: 0px 22px 0px 22px;
			}
			.p4 span{
				color: #000;
				margin-left: 4px;
			}
			.dibu {
				width: 600px;
				height: 60px;
				/* border: 1px solid #000; */
				color: #757575;
				font-size: 14px;
			}

			.dibu_nav li {
				list-style: none;
				display: inline-block;
				margin: 5px 10px;
				/* color: #C2B0B7; */
			}

			.dibu {
				margin: auto auto;
				position: relative;
				top: 290px;
				line-height: 20px;
			}

			.dibu_nav_dwon li {
				list-style: none;
				display: inline-block;
				margin: 5px 10px;
				/* color: #C2B0B7; */
			}
		</style>
	</head>
	<body>
		<div id="bigbox">
			<div id="erweima"></div>
			<div class="logo">
				<img src="http://s02.mifile.cn/assets/static/image/mi-logo.png">
			</div>
			<p class="p1">注册小米账号</p>
			<div id="guojia">
				<p class="p2">国家/地区</p><br />
				<div class="cn">
					<p>中国</p>
					<div id="dwon"><i class="icon_cirarr"></i></div>
				</div>
			</div>
			<p class="p3">成功注册帐号后，国家/地区将不能被修改</p>
			<div id="phone">
				<p class="phone_p">手机号码</p><br />
				<div class="phone_kuang">
					<div id="phone_dwon">
						<p>+86</p><i class="icon_arrow"></i>
					</div>
					<input type="text" name="number" id="number" placeholder="请输入手机号码" />
				</div>
			</div>
			<p class="p4">已阅读并同意：小米<span><b>用户协议</b></span>和<span><b>隐私政策</b></span></p>
			<div id="submit">立即注册</div>
		</div>
		<div class="dibu">
			<nav class="dibu_nav">
				<li style="color: #333333;font-size: 14px;">简体</li><span>|</span>
				<li>繁体</li><span>|</span>
				<li>English</li><span>|</span>
				<li>常见问题</li>
			</nav>
			<nav class="dibu_nav_dwon">
				<li>小米公司版权所有-京ICP备10046444-<img src="https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png">京公网安备11010802020134号-京ICP证110507号</li>
			</nav>
		</div>

		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
				var number = "";
				$("#number").on("input",function(){
					number = $(this).val();
					// console.log(number);
				});
				$("#submit").on("click",function(){
					if(number == ""){
						alert("请输入正确的手机号");
					}
					else{
						$.ajax({
							url:"https://test.shop.deepe.ren/api/register/verify",
							data:{"phone":number},
							method:"post",
							success: function(data) {
								console.log(data);
								var code = data.data.code;
								localStorage.setItem('obj', JSON.stringify({number,code}));
								$(location).attr("href","注册验证码界面.html");
								alert("您的验证码为："+code);
							},
							error:function () {
								alert("请求失败");
							}
							
						});
					$("#number").attr("value","");
					};
				});
				
		</script>
	</body>
</html>